<template>
  <div class="eventing">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" align="center" label="订单号" />
      <el-table-column prop="time" align="center" label="爆料日期" />
      <el-table-column prop="user" align="center" label="爆料人" />
      <el-table-column prop="phone" align="center" label="联系方式" />
      <el-table-column prop="eventType" align="center" label="爆料类型" />
      <el-table-column prop="area" align="center" width="250" label="现场地址" />
      <el-table-column label="现场图片" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <img :src="scope.row.photo" alt="123">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="beizhu" align="center" label="现场备注" />
      <el-table-column prop="state" align="center" label="事件处理状态" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.state==='待处理'? true : false"
            size="small"
            type="success"
            @click="agree(scope.row)"
          >接受订单</el-button>
          <el-button
            v-show="scope.row.state==='待处理'? false : true"
            size="small"
            type="success"
            @click="detaill(scope.row)"
          >查看处理信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改一条 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="订单号:">
          <span>{{ card_id }}</span>
        </el-form-item>
        <el-form-item label="处理人:">
          <el-input v-model="input" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确定接受</el-button>
      </div>
    </el-dialog>
    <!-- 修改一条 -->
    <el-dialog :visible.sync="defaultFrom">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="订单号:">
          <span>{{ card_id }}</span>
        </el-form-item>
        <el-form-item label="处理人:">
          <span>{{ user2 }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="defaultFrom = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageCount: 1,
      pageNum: 1, // 页数
      total: 3,
      dialogFormVisible: false,
      defaultFrom: false,
      card_id: '',
      user2: '',
      temp: {},
      rules: {},
      input: '',
      tableData: [
        {
          id: '5648621343',
          user: '刘女士',
          phone: '13456568916',
          eventType: '小区趣事',
          area: '浙江省杭州市下城区下沙大都会风情苑11幢',
          time: '2019-12-01',
          beizhu: '出门看到楼下的桔子熟了',
          photo:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576730532018&di=dbee1df82e8415807bfe30ac89317bbf&imgtype=0&src=http%3A%2F%2Fphotosharp.jdfood.com.tw%2FAlbum1%2F99%2F157%2F12427%2F20091223082058_0.JPG',
          state: '待处理'
        },
        {
          id: '5648621343',
          user: '吴女士',
          phone: '13199451349',
          eventType: '爱心社区',
          area: '浙江省杭州市下城区下沙大都会风情苑5幢',
          time: '2019-12-12',
          beizhu: '我家楼下来了一只流浪狗,有人领养吗',
          photo:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576730770857&di=906a1e34de61cc808d2be1c26a16ee47&imgtype=0&src=http%3A%2F%2F00imgmini.eastday.com%2Fmobile%2F20191218%2F2019121812_11ecd8de48dd4d1ea75461dac77d77a9_1501_mwpm_03201609.jpg',
          state: '处理中'
        },
        {
          id: '5648621343',
          user: '王先生',
          phone: '15673216646',
          eventType: '日常生活',
          area: '浙江省杭州市下城区下沙大都会风情苑9幢',
          time: '2019-12-06',
          beizhu: '出门遛弯捡到的一串钥匙,都看下是谁的',
          state: '待处理',
          photo:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576731148244&di=f1dba29cf23356bcf8b7d8c2c73f98c7&imgtype=0&src=http%3A%2F%2Fwww.whx.gov.cn%2FUploadFile%2Fimage%2F20181119%2F20181119150051785178.jpg'
        }
      ]
    }
  },
  mounted() {},
  methods: {
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    agree(row) {
      this.dialogFormVisible = true
      this.card_id = row.id
    },
    detaill(row) {
      this.defaultFrom = true
      this.card_id = row.id
      this.user2 = '物业组王也'
    }
  }
}
</script>
<style lang="scss" scoped>
.eventing {
  margin-top: 55px;
  img {
    width: 100px;
    height: 80px;
  }
}
</style>
